$(() => {
   const box = $('.Community')
   function recomendar(page) {
      $.get('/recomendar', { page }, res => {
         if (res.code == 200) {
            res.article.forEach(a => {
               box.append(`
                  <div class="option">
                     <a target="_blank" href="/article/${a.id}" class="title">
                        ${a.title}
                     </a>
                     <div class="info">
                        <a target="_blank" href="/article/${a.id}" class="cover">
                           <img src="/userupimage/${a.cover.split(' ')[0]}" alt="">
                        </a>
                        <div class="text">
                           <div class="abstract">
                              ${a.abstract}
                           </div>
                           <div class="info_count">
                              <a data-id="${a.id}" href="javascript:;" class="agree ${a.isAgree ? ' active' : ''}">
                                 <img class="img_0"
                                    src="">
                                 <img class="img_1" src="">
                                 <span class="agree_count">${a.agree}</span>
                                 赞
                              </a>
                              <span class="g"> · </span>
                              <span class="nickname">${a.nickname}</span>
                           </div>
                        </div>
                     </div>
                  </div>`)
            });
         }
      })
   }
   recomendar(0)
   box.on('click', '.agree', function () {
      const t = $(this)
      const id = t.data('id')
      if (t.hasClass('active')) {
         $.get('/api/agree/cancel', { id }, res => {
            const { code } = res
            if (code == 200) {
               t.removeClass('active')
               const agree_count = t.find('.agree_count')
               agree_count.text(+agree_count.text() - 1)
            } else if (code == 401 || code == 402) {
               location.href = '/view/login'
            } else {
               console.log(code);
            }
         })
      } else {
         $.get('/api/agree', { id }, res => {
            const { code } = res
            if (code == 200) {
               t.addClass('active')
               const agree_count = t.find('.agree_count')
               agree_count.text(+agree_count.text() + 1)
            } else if (code == 401 || code == 402) {
               location.href = '/view/login'
            } else {
               console.log(code);
            }
         })
      }
   })
})